<template>
    <div v-show="target.usage=='pwm'" class="sidesetting-pwm">
        <div size="small" style="margin-bottom:10px">
            PWM 通过控制每个周期内的占空比例，进行信号量输出，或者用于功率调节。
        </div>
        
        <div style="margin-top:25px" class="row item-center">
            <div style="width:75px">占空比%</div>
            <InputNumber class="grow" :value="target.pwm.value*100" :min="0" :max="100" style="width:100px; margin: auto auto; margin-right:20px" @on-change="target.pwm.value=arguments[0]/100"></InputNumber>
        </div>     
        
        <div class="row" style="margin-top:15px">
            <span style="width:75px"></span>
            <div class="grow row gap5" style="padding-right:20px">
                <Button @click="target.pwm.value = 0" class="grow"> 最小 </Button>
                <Button @click="target.pwm.value = 0.5" class="grow"> 中值 </Button>
                <Button @click="target.pwm.value = 1" class="grow"> 最大 </Button>
            </div>
        </div>

        <DebouncerSlider 
            :value="target.pwm.value*100" 
            :min="0" :max="100" 
            :tip-format="(v)=>v+' %'"
            :delay="500"
            @on-input="target.pwm.value=arguments[0]/100"
            style="margin-left:20px; margin-right:20px; margin-top:25px"
        ></DebouncerSlider>

        <Form label-position="left" :label-width="75" style="margin-top:25px" @submit.native.prevent>
            <Form-item label="频率(HZ)" v-show="showFrequency">
                <InputNumber style="width:100px" :value="target.pwm.setting.frequency" @on-change="frequencyChanged"></InputNumber>
            </Form-item>
            <Form-item label="分辨率" v-show="showFrequency">
                <Select style="width:100px" :value="target.pwm.setting.resolution" @on-change="resolutionChanged">
                    <Option v-for="b in 20" :value="b">{{b}}位</Option>
                </Select>
            </Form-item>
        </Form>

    </div>
</template>

<script lang="ts">
// doc: https://github.com/kaorun343/vue-property-decorator
import { Component, Provide, Prop, Watch, Vue } from 'vue-property-decorator'
import { Stud } from '../../../../store/Stud'
import { Usage } from '../../../../store/StudUsage';
import { PartHost, IPwmPart } from '../../../../store/parts/PartBase'


@Component({components:{}})
export default class PWM extends Vue {
    
    @Prop(Stud) target: Stud

    mounted() {
    }

    get showFrequency() {
        return this.target.part instanceof PartHost
    }

    frequencyChanged(value: number) {
        if(this.target.part instanceof PartHost) {
            this.target.part.setPWMFrequency(this.target, value)
        }
    }
    resolutionChanged(value: number) {
        if(this.target.part instanceof PartHost) {
            this.target.part.setPWMResolution(this.target, value)
        }
    }
}
</script>